import React from 'react';
import { connect } from 'dva'
import styles from './tired.less';
import qrcodeImg from '@/assets/image/dtimage/qrcode.png'
import downIcon from '../../assets/image/xl.svg'
import { setDate } from '../../utils/timeProcess.js'


class Tired extends React.Component {
  render() {
    const { longestWorkHourDay, longestWorkHour, longestWorkHourOffDutyTime } = this.props
    return (
      <div className={styles.bg}>
        <img className={styles.downIcon} src={downIcon} alt='' />
        <div className={styles.box}>
          <div className={styles.textBox}>
            <div className={styles.text1}><span className={styles.textColor}>{setDate(longestWorkHourDay || '')}</span></div>
            <div className={styles.text1}>也许是很特别的一天</div>
            <div className={styles.text1}>你持续工作了<span className={styles.textColor}>{Number(longestWorkHour || '').toFixed(1)}</span>个小时</div>
            <div className={styles.text1}><span className={styles.textColor}>{(longestWorkHourOffDutyTime || '').slice(0, 6)}</span>
              <div className={styles.text1}></div>你疲惫地合上了电脑</div>
            <div className={styles.text1}>梦想从不会被辜负</div>
          </div>
          <div className={styles.imgBox}>
            <div className={styles.img}>
              <img className={styles.qrcode} src={qrcodeImg} alt=""></img>
            </div>
          </div>
        </div>
        <div className={styles.titleBox}>
          <div className={styles.title1}>《</div>
          <div className={styles.title2}>疲惫</div>
          <div className={styles.title3}>《</div>
        </div>
        <div className={styles.text2}>忙着敲代码？埋头画原型图？还是努力学习数澜的新书《数据中台：让数据用起来》？</div>
      </div>
    )
  }
}

export default connect(({ index }) => index.workHour)(Tired)